colors = 'gray'   gainsboro
       , 'white'  white
       , 'black'  black
       , 'purple' orchid
       , 'blue'   skyblue
       , 'cyan'   cadetblue
       , 'green'  palegreen
       , 'brown'  peru
       , 'yellow' lemonchiffon
       , 'orange' orange
       , 'red'    salmon
       , 'pink'   pink

sizes  = 'sm'   .6rem
       , 'md'   .8rem
       , 'lg'   1.6rem
       , 'xl'   2rem
       , 'xxl'  4rem

.f
    display: -webkit-flex
    display flex
    flex 1 0 auto
    -webkit-flex-wrap nowrap
    flex-wrap nowrap
    position relative
    &.i
        display inline-flex
    &.v
        flex-direction column
    &.h
        flex-direction row
    &.hr
        flex-direction row-reverse
    &.z
        -webkit-flex-wrap wrap
        flex-wrap wrap

    &.is
        align-items flex-start
    &.ie
        align-items flex-end
    &.io
        align-items center
    &.ix
        align-items stretch
    &.il
        align-items baseline

    &.js
        justify-content flex-start
    &.je
        justify-content flex-end
    &.jo
        justify-content center
    &.ja
        justify-content space-around
    &.jb
        justify-content space-between

    &.xs
        align-content flex-start
    &.xe
        align-content flex-end
    &.xo
        align-content center
    &.xx
        align-content stretch
    &.xa
        align-content space-around
    &.xb
        align-content space-between

    >._ys
        align-self flex-start
    >._ye
        align-self flex-end
    >._yo
        align-self center
    >._yx
        align-self stretch
    >._yl
        align-self baseline

    &.__0>* , >._0
        flex-basis 0
    &.__1>* , >._1
        flex-basis 100%
    &.__4>* , >._4
        flex-basis 25%
    &.__2>* , >._2
        flex-basis 50%
    &.__5>* , >._5
        flex-basis 20%

    &.__00>* , >._00
        flex-grow 0
        flex-shrink 0
    &.__11>* , >._11
        flex-grow 1
        flex-shrink 1
    &.__01>* , >._01
        flex-grow 0
        flex-shrink 1

.g
    display grid
    grid-auto-rows minmax(auto, 1fr)
    grid-auto-columns minmax(auto, 1fr)
    &.s
        display subgrid
    &.i
        display inline-grid
    &.r
        grid-auto-flow row
    &.c
        grid-auto-flow column
    &.d
        grid-auto-flow dense

    &.gs
        grid-gap .2em
    &.gm
        grid-gap .5em
    &.gb
        grid-gap 1em
    &.gl
        grid-gap 2em


    for i in 1..5
        &.t{i}
            grid-template-columns repeat(i, auto)
            grid-template-rows repeat(i, auto)

    for i in 1..12
        &.c{i}
            grid-template-columns repeat(i, 1fr)
        &.r{i}
            grid-template-rows repeat(i, 1fr)
        >._c{i}
            grid-column-end span i
        >._r{i}
            grid-row-end span i

    &.is
        align-content start
    &.ie
        align-content end
    &.io
        align-content center
    &.ix
        align-content stretch
    &.ia
        align-content space-around
    &.ib
        align-content space-between
    &.jn
        align-content space-evenly

    &.js
        justify-content start
    &.je
        justify-content end
    &.jo
        justify-content center
    &.jx
        justify-content stretch
    &.ja
        justify-content space-around
    &.jb
        justify-content space-between
    &.jn
        justify-content space-evenly

    &.xs
        justify-items start
    &.xe
        justify-items end
    &.xo
        justify-items center
    &.xx
        justify-items stretch

    &.ys
        align-items start
    &.ye
        align-items end
    &.yo
        align-items center
    &.yx
        align-items stretch

    >._xs
        justify-self start
    >._xe
        justify-self end
    >._xo
        justify-self center
    >._xx
        justify-self stretch

    >._ys
        align-self start
    >._ye
        align-self end
    >._yo
        align-self center
    >._yx
        align-self stretch

scroll()
    flex 1 1 0 // 外层 display: flex
    -webkit-overflow-scrolling  touch
    &::-webkit-scrollbar
        width 4px
        height 4px
    &::-webkit-scrollbar-thumb
        background lightgray
        border-radius 2px
        //background radial-gradient(lightgray, transparent 90%)
        //background linear-gradient(180deg, transparent 20%,#acb3c2 50%, transparent 80%)

.scrollx
    overflow-x auto
    overflow-y hidden
    scroll()

.scrolly
    overflow-x hidden
    overflow-y auto
    scroll()

.abs
    position absolute

.ease
    transition all 1s ease

.filter-gray
    filter: grayscale(100%);
    filter: gray;

.pointer
    cursor pointer

.picture, ._picture img
    width 100%
    height 100%

.fig, .__fig img
    width: 100%

.__mt>* , .mt
    margin-top 1em

.__mb>* , .mb
    margin-bottom 1em

.__mr>* , .mr
    margin-right 1em

.__ml>* , .ml
    margin-left 1em

.__m>* , .m
    margin 0.5em


.__box>* , .box
    padding .5rem
    for c in colors
        &.bg-{c[0]}
            background-color: c[1]
    for c in colors
        &.bd-{c[0]}
            border-color: c[1]
    for c in colors
        &.fg-{c[0]}
            color: c[1]
    &.bb
        border-bottom 1px solid transparent
    &.wd
        padding 1em 4em 1em 4em
    &.bd
        border 1px solid transparent
    &.round
        border 1px solid transparent
        border-radius 5px

.shadow
    box-shadow rgba(0, 0, 0, 0.12) 0px 1px 1px, rgba(0, 0, 0, 0.12) 0px 2px 4px;
    z-index 888

.overlay
    position absolute
    width 100%
    opacity 1
    height auto
    align-self center

.txt
    for c in colors
        &.{c[0]}
            color c[1]
    for s in sizes
        &.{s[0]}
            font-size s[1]
    &.bold
        font-weight bold

// 页面不会因滚动条而跳动
html
  overflow-y: scroll
:root
  overflow-y: auto
  overflow-x: hidden
:root body
  position: absolute
body
  width: 100vw
  overflow: hidden


html
    height 100%
    -webkit-text-size-adjust 100%
    -ms-text-size-adjust: 100%
    font-family  "Helvetica Neue",Tahoma,Arial,PingFangSC-Regular,"Hiragino Sans GB","Microsoft Yahei",sans-serif
    font-size 17.5px
body
    display flex
    justify-content center
    margin 0
    min-height 100%
    line-height 1

.app
    display flex
    color #2C3E50
    width 100%

.price
    &:before
        content '\A5'
a
    text-decoration none
    &:focus
        box-shadow none
ul
    padding 0
    margin 0
li
    list-style none
    margin-top 0